<template>
  <div class="user">
    <van-nav-bar title="我的京东">
      <template #left>
        <van-icon
          name="arrow-left"
          size=".6rem"
          @click="$router.back()"
          color="grey"
        />
      </template>
      <template #right>
        <span @click="quitlogin">退出登录</span>
      </template>
    </van-nav-bar>

    <div class="userdetail">
      <div class="top">
        <img
          class="avatar"
          src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png"
        />
        <!-- <div v-text="userinfo.username"></div> -->
        <!-- <div v-text="name"></div> -->
        <div>{{ name }}</div>
      </div>
      <div class="usermenu">
        <span
          ><van-icon
            name="wap-home"
            @click="$router.push('/user/addr')"
          />收货地址</span
        >
        <span> <van-icon name="manager" />个人信息 </span>
        <span> <van-icon name="gold-coin" />订单详情</span>
        <span> <van-icon name="coupon" />优惠详情</span>
      </div>
    </div>

    <TabBar></TabBar>
  </div>
</template>

<script>
import { TabBar } from "@/components";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    TabBar,
  },
  created() {
    this.getUserInfo();
  },
  computed: {
    ...mapState("user", ["userinfo"]),
    name() {
      console.log(this.userinfo.username);
      return this.userinfo.username;
    },
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("user", ["quit"]),
    quitlogin() {
      this.quit();
      this.$router.replace("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.user {
  background-color: #f2f2f2;
  height: 17rem;
}

.userdetail {
  width: 9.333333rem;
  height: 7rem;
  margin: 0.4rem auto;
  background-color: #e84545;
  border-radius: 20px;
  overflow: hidden;
  .top {
    background-color: white;
    border-radius: 20px;
    width: 8rem;
    display: flex;
    height: 1.333333rem;
    margin: 0.8rem 0.8rem 0 0.8rem;
    img {
      width: 1.333333rem;
      height: 1.333333rem;
    }
    div {
      font-size: 0.6rem;
      text-align: center;
      width: 2.666667rem;
      line-height: 1.333333rem;
    }
  }
  .usermenu {
    margin: 1rem auto;
    width: 8rem;
    height: 4rem;
    span {
      display: inline-block;
      font-size: 0.4rem;
      margin-bottom: 0.533333rem;
      margin-left: 0.3rem;
      background-color: #903749;
      color: white;
      border-radius: 20px;
      padding: 8px;
    }
  }
}
</style>